<form class="layui-form layui-card" action="" data-auto="true" method="post" autocomplete="off">

    <div class="layui-card-body">

        <div class="layui-form-item">
            <label class="layui-form-label">筛选时间</label>
            <div class="layui-input-block">
                <input id="time" name="time" required placeholder="请您先筛选时间段" value="" class="layui-input">
                <p class="help-block"></p>
            </div>
        </div>
    </div>

    <input type='hidden' value='{$device_id|default=""}' id='device_id'>
    <input type='hidden' value='{$channel_id|default=""}' id='channel_id'>

    <div class="hr-line-dashed"></div>
    {notempty name='vo.id'}<input type='hidden' value='{$vo.id}' name='id'>{/notempty}
    <input type="text" id="test" value="aaa" style="display: none;">

    <div class="layui-form-item text-center">
        <button class="layui-btn" type='button' id="btn">确定</button>
        <button class="layui-btn layui-btn-danger" type='button' data-confirm="确定要取消吗？" data-close>取消</button>
    </div>
</form>

<script>
    form.render();
    laydate.render({
        elem: '#time'
        ,min: -7 //7天前
        ,max: 1 //1天后
        ,type: 'datetime'
        ,range: true
    });

    layui.use(['jquery'], function() {
        var $ = layui.jquery;
        var times, layLoad;
        $('#btn').click(function () {
            if (times) {
                layer.msg('请勿频繁操作')
                return false
            }
            layLoad = layer.load(2, {
                shade: false
            });
            $.ajax({
                url: "{:url('admin/VideoPlayback/play')}",
                type:'post',
                data : {
                    'time': $('#time').val() || '',
                    'device_id': $('#device_id').val(),
                    'channel_id': $('#channel_id').val(),
                },
                success: res => {
                    if (res.code == 1) {
                        let d = res.data
                        console.log('获取回放信息', res, layer.index);
                        if (res.code == 1) {
                            let timeSpace = 'empty' // 代替时间选择的空格
                            let time = $('#time').val().replace(/ /g, timeSpace)
                            // let _url = 'http://localhost:8080/#/index.html?history=true',
                            let _url = d.url+(d.url.indexOf('?')>-1?'&':'?')+'history=true',
                                url2 = _url+'&channel_id='+d.channel_id+'&device_id='+d.device_id+'&time='+time+'&timeSpace='+timeSpace
                            layer.close(layer.index)
                            console.log('转跳链接', url2)
                            window.open(url2)
                        }
                    } else {
                        layer.alert(res.info, {
                            time: 20000, //20s后自动关闭
                            btn: ['知道了']
                        });
                    }
                },
                error:function(jqXHR){
                    layer.msg("发生错误："+ jqXHR.status);
                },
                complete: function(res){
                    setTimeout(function(){
                        times = false;
                        layer.close(layLoad)
                    }, 100)
                }
            });
        });
    });
</script>

